js: Ease non-animatable actor properties

Properties that aren't marked as animatable don't support *implicit*
animations, but they can still be animated with explicit transitions.
Use the newly added convenience method to cut down further on Tweener
usage.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/666

diff --git a/js/ui/keyboard.js b/js/ui/keyboard.js
index 1d26e61435fda8eb0cdfa1c0346c133c7b498fbd..462d860c4df1250abccdc30e820f6830b67de9bf 100644 (file)
--- a/js/ui/keyboard.js
+++ b/js/ui/keyboard.js
@@ -11,7 +11,6 @@ const Layout = imports.ui.layout;
 const Main = imports.ui.main;
 const PageIndicators = imports.ui.pageIndicators;
 const PopupMenu = imports.ui.popupMenu;
-const Tweener = imports.ui.tweener;
 
 var KEYBOARD_REST_TIME = Layout.KEYBOARD_ANIMATION_TIME * 2;
 var KEY_LONG_PRESS_TIME = 250;
@@ -712,15 +711,13 @@ var EmojiPager = GObject.registerClass({
             let relDelta = Math.abs(this._delta - value) / this._width;
             let time = PANEL_SWITCH_ANIMATION_TIME * Math.abs(relDelta);
 
-            Tweener.removeTweens(this);
-            Tweener.addTween(this,
-                             { delta: value,
-                               time: time / 1000,
-                               transition: 'easeInOutQuad',
-                               onComplete() {
-                                   this.setCurrentPage(this.getFollowingPage());
-                               }
-                             });
+            this.remove_all_transitions();
+            this.ease_property('delta', value, {
+                duration: time,
+                onComplete: () => {
+                    this.setCurrentPage(this.getFollowingPage());
+                }
+            });
         }
     }
 
@@ -728,12 +725,10 @@ var EmojiPager = GObject.registerClass({
         let relDelta = Math.abs(this._delta) / this.width;
         let time = PANEL_SWITCH_ANIMATION_TIME * Math.abs(relDelta);
 
-        Tweener.removeTweens(this);
-        Tweener.addTween(this,
-                         { delta: 0,
-                           time: time / 1000,
-                           transition: 'easeInOutQuad',
-                         });
+        this.remove_all_transitions();
+        this.ease_property('delta', 0, {
+            duration: time,
+        });
     }
 
     _initPagingInfo() {

diff --git a/js/ui/lightbox.js b/js/ui/lightbox.js
index 0f257815489d3b57bab35f939800b139d0eb8666..fbbc011681ebc671ec11ad992c970fcde9788868 100644 (file)
--- a/js/ui/lightbox.js
+++ b/js/ui/lightbox.js
@@ -5,7 +5,6 @@ const { Clutter, GObject, Shell, St } = imports.gi;
 const Signals = imports.signals;
 
 const Params = imports.misc.params;
-const Tweener = imports.ui.tweener;
 
 var DEFAULT_FADE_FACTOR = 0.4;
 var VIGNETTE_BRIGHTNESS = 0.2;
@@ -175,29 +174,31 @@ var Lightbox = class Lightbox {
     show(fadeInTime) {
         fadeInTime = fadeInTime || 0;
 
+        this.actor.remove_all_transitions();
+
+        let onComplete = () => {
+            this.shown = true;
+            this.emit('shown');
+        };
+
         if (this._radialEffect) {
-            let effect = this.actor.get_effect('radial');
-            Tweener.removeTweens(effect);
-            Tweener.addTween(effect,
-                             { brightness: VIGNETTE_BRIGHTNESS,
-                               sharpness: VIGNETTE_SHARPNESS,
-                               time: fadeInTime / 1000,
-                               transition: 'easeOutQuad',
-                               onComplete: () => {
-                                   this.shown = true;
-                                   this.emit('shown');
-                               }
-                             });
+            this.actor.ease_property(
+                '@effects.radial.brightness', VIGNETTE_BRIGHTNESS, {
+                    duration: fadeInTime,
+                    mode: Clutter.AnimationMode.EASE_OUT_QUAD
+                });
+            this.actor.ease_property(
+                '@effects.radial.sharpness', VIGNETTE_SHARPNESS, {
+                    duration: fadeInTime,
+                    mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                    onComplete
+                });
         } else {
-            this.actor.remove_all_transitions();
             this.actor.ease({
                 opacity: 255 * this._fadeFactor,
                 duration: fadeInTime,
                 mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                onComplete: () => {
-                    this.shown = true;
-                    this.emit('shown');
-                }
+                onComplete
             });
         }
 
@@ -208,29 +209,28 @@ var Lightbox = class Lightbox {
         fadeOutTime = fadeOutTime || 0;
 
         this.shown = false;
+        this.actor.remove_all_transitions();
+
+        let onComplete = () => this.actor.hide();
 
         if (this._radialEffect) {
-            let effect = this.actor.get_effect('radial');
-            Tweener.removeTweens(effect);
-            Tweener.addTween(effect,
-                             { brightness: 1.0,
-                               sharpness: 0.0,
-                               opacity: 0,
-                               time: fadeOutTime / 1000,
-                               transition: 'easeOutQuad',
-                               onComplete: () => {
-                                   this.actor.hide();
-                               }
-                             });
+            this.actor.ease_property(
+                '@effects.radial.brightness', 1.0, {
+                    duration: fadeOutTime,
+                    mode: Clutter.AnimationMode.EASE_OUT_QUAD
+                });
+            this.actor.ease_property(
+                '@effects.radial.sharpness', 0.0, {
+                    duration: fadeOutTime,
+                    mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                    onComplete
+                });
         } else {
-            this.actor.remove_all_transitions();
             this.actor.ease({
                 opacity: 0,
                 duration: fadeOutTime,
                 mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                onComplete: () => {
-                    this.actor.hide();
-                }
+                onComplete
             });
         }
     }

diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index 8fbd79a849dd839aad338be145935e5207dc15ec..4dcdb6d7fd6ffc7ea8c7b0f2ad8acccecafc0879 100644 (file)
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -4,7 +4,6 @@ const MessageTray = imports.ui.messageTray;
 const Signals = imports.signals;
 
 const Calendar = imports.ui.calendar;
-const Tweener = imports.ui.tweener;
 const Util = imports.misc.util;
 
 var MESSAGE_ANIMATION_TIME = 100;
@@ -440,10 +439,11 @@ var Message = class Message {
         }
 
         if (animate) {
-            Tweener.addTween(this._bodyStack.layout_manager,
-                             { expansion: 1,
-                               time: MessageTray.ANIMATION_TIME / 1000,
-                               transition: 'easeOutQuad' });
+            this._bodyStack.ease_property('@layout.expansion', 1, {
+                progress_mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                duration: MessageTray.ANIMATION_TIME,
+            });
+
             this._actionBin.scale_y = 0;
             this._actionBin.ease({
                 scale_y: 1,
@@ -460,10 +460,11 @@ var Message = class Message {
 
     unexpand(animate) {
         if (animate) {
-            Tweener.addTween(this._bodyStack.layout_manager,
-                             { expansion: 0,
-                               time: MessageTray.ANIMATION_TIME / 1000,
-                               transition: 'easeOutQuad' });
+            this._bodyStack.ease_property('@layout.expansion', 0, {
+                progress_mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                duration: MessageTray.ANIMATION_TIME,
+            });
+
             this._actionBin.ease({
                 scale_y: 0,
                 duration: MessageTray.ANIMATION_TIME,

diff --git a/js/ui/osdWindow.js b/js/ui/osdWindow.js
index cdcd36a18c0cb021ac74ffd5a18459b4ecf332b8..0f85dce385dcd4dde637929463f44eac244b2c2d 100644 (file)
--- a/js/ui/osdWindow.js
+++ b/js/ui/osdWindow.js
@@ -7,7 +7,6 @@ const Mainloop = imports.mainloop;
 const BarLevel = imports.ui.barLevel;
 const Layout = imports.ui.layout;
 const Main = imports.ui.main;
-const Tweener = imports.ui.tweener;
 
 var HIDE_TIMEOUT = 1500;
 var FADE_TIME = 100;
@@ -113,10 +112,10 @@ var OsdWindow = class {
         this._level.visible = (value != undefined);
         if (value != undefined) {
             if (this.actor.visible)
-                Tweener.addTween(this._level,
-                                 { value: value,
-                                   time: LEVEL_ANIMATION_TIME / 1000,
-                                   transition: 'easeOutQuad' });
+                this._level.ease_property('value', value, {
+                    mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                    duration: LEVEL_ANIMATION_TIME
+                });
             else
                 this._level.value = value;
         }

diff --git a/js/ui/overview.js b/js/ui/overview.js
index 57dcca278841c7cff9a46f7118172e254cf301ee..1325eff6b54a3251cacd3505a600d91539f55b65 100644 (file)
--- a/js/ui/overview.js
+++ b/js/ui/overview.js
@@ -13,7 +13,6 @@ const Main = imports.ui.main;
 const MessageTray = imports.ui.messageTray;
 const OverviewControls = imports.ui.overviewControls;
 const Params = imports.misc.params;
-const Tweener = imports.ui.tweener;
 const WorkspaceThumbnail = imports.ui.workspaceThumbnail;
 
 // Time for initial animation going into Overview mode
@@ -174,24 +173,28 @@ var Overview = class {
     _unshadeBackgrounds() {
         let backgrounds = this._backgroundGroup.get_children();
         for (let i = 0; i < backgrounds.length; i++) {
-            Tweener.addTween(backgrounds[i],
-                             { brightness: 1.0,
-                               vignette_sharpness: 0.0,
-                               time: SHADE_ANIMATION_TIME / 1000,
-                               transition: 'easeOutQuad'
-                             });
+            backgrounds[i].ease_property('brightness', 1.0, {
+                duration: SHADE_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD
+            });
+            backgrounds[i].ease_property('vignette-sharpness', 0.0, {
+                duration: SHADE_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD
+            });
         }
     }
 
     _shadeBackgrounds() {
         let backgrounds = this._backgroundGroup.get_children();
         for (let i = 0; i < backgrounds.length; i++) {
-            Tweener.addTween(backgrounds[i],
-                             { brightness: Lightbox.VIGNETTE_BRIGHTNESS,
-                               vignette_sharpness: Lightbox.VIGNETTE_SHARPNESS,
-                               time: SHADE_ANIMATION_TIME / 1000,
-                               transition: 'easeOutQuad'
-                             });
+            backgrounds[i].ease_property('brightness', Lightbox.VIGNETTE_BRIGHTNESS, {
+                duration: SHADE_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD
+            });
+            backgrounds[i].ease_property('vignette-sharpness', Lightbox.VIGNETTE_SHARPNESS, {
+                duration: SHADE_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD
+            });
         }
     }
 

diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 30cd1e108cd0b019c3977224c4d1b0fac3f6df7d..c9f9872c8eb60c5f5e2a94ee6a7443649aacdfb0 100644 (file)
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -6,7 +6,6 @@ const { Clutter, GObject, Meta, St } = imports.gi;
 const Dash = imports.ui.dash;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
-const Tweener = imports.ui.tweener;
 const ViewSelector = imports.ui.viewSelector;
 const WorkspaceThumbnail = imports.ui.workspaceThumbnail;
 
@@ -147,9 +146,10 @@ var SlidingControl = class {
     }
 
     _updateSlide() {
-        Tweener.addTween(this.layout, { slide_x: this._getSlide(),
-                                        time: SIDE_CONTROLS_ANIMATION_TIME / 1000,
-                                        transition: 'easeOutQuad' });
+        this.actor.ease_property('@layout.slide-x', this._getSlide(), {
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            duration: SIDE_CONTROLS_ANIMATION_TIME,
+        });
     }
 
     getVisibleWidth() {
@@ -185,9 +185,10 @@ var SlidingControl = class {
             return;
 
         this.layout.translation_x = translationStart;
-        Tweener.addTween(this.layout, { translation_x: translationEnd,
-                                        time: SIDE_CONTROLS_ANIMATION_TIME / 1000,
-                                        transition: 'easeOutQuad' });
+        this.actor.ease_property('@layout.translation-x', translationEnd, {
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            duration: SIDE_CONTROLS_ANIMATION_TIME,
+        });
     }
 
     _onOverviewHiding() {

diff --git a/js/ui/windowManager.js b/js/ui/windowManager.js
index 1d1f244ad466f228bc547cc1eb5f81c5a3de7df3..c6eb3735210d79344380dc7491f262e9eceb6ec6 100644 (file)
--- a/js/ui/windowManager.js
+++ b/js/ui/windowManager.js
@@ -12,7 +12,6 @@ const WorkspaceSwitcherPopup = imports.ui.workspaceSwitcherPopup;
 const InhibitShortcutsDialog = imports.ui.inhibitShortcutsDialog;
 const Main = imports.ui.main;
 const ModalDialog = imports.ui.modalDialog;
-const Tweener = imports.ui.tweener;
 const WindowMenu = imports.ui.windowMenu;
 const PadOsd = imports.ui.padOsd;
 const EdgeDragAction = imports.ui.edgeDragAction;
@@ -118,17 +117,18 @@ class DisplayChangeDialog extends ModalDialog.ModalDialog {
 var WindowDimmer = class {
     constructor(actor) {
         this._brightnessEffect = new Clutter.BrightnessContrastEffect({
+            name: 'dim',
             enabled: false
         });
         actor.add_effect(this._brightnessEffect);
         this.actor = actor;
         this._enabled = true;
-        this._dimFactor = 0.0;
     }
 
     _syncEnabled() {
+        let animating = this.actor.get_transition('@effects.dim.brightness') != null;
         let dimmed = this._brightnessEffect.brightness.red != 127;
-        this._brightnessEffect.enabled = (this._enabled && dimmed);
+        this._brightnessEffect.enabled = this._enabled && (animating || dimmed);
     }
 
     setEnabled(enabled) {
@@ -137,27 +137,16 @@ var WindowDimmer = class {
     }
 
     setDimmed(dimmed, animate) {
-        let factor = dimmed ? 1.0 : 0.0;
-
-        if (animate) {
-            Tweener.addTween(this, {
-                _dimFactor: factor,
-                time: (dimmed ? DIM_TIME : UNDIM_TIME) / 1000,
-                transition: 'linear',
-                onUpdate: () => {
-                    let val = 127 * (1 + this._dimFactor * DIM_BRIGHTNESS);
-                    let color = Clutter.Color.new(val, val, val, 255);
-                    this._brightnessEffect.brightness = color;
-                    this._syncEnabled();
-                }
-            });
-        } else {
-            this._dimFactor = factor;
-            let val = 127 * (1 + this._dimFactor * DIM_BRIGHTNESS);
-            let color = Clutter.Color.new(val, val, val, 255);
-            this._brightnessEffect.brightness = color;
-            this._syncEnabled();
-        }
+        let val = 127 * (1 + (dimmed ? 1 : 0) * DIM_BRIGHTNESS);
+        let color = Clutter.Color.new(val, val, val, 255);
+
+        this.actor.ease_property('@effects.dim.brightness', color, {
+            mode: Clutter.AnimationMode.LINEAR,
+            duration: (dimmed ? DIM_TIME : UNDIM_TIME) * (animate ? 1 : 0),
+            onComplete: () => this._syncEnabled()
+        });
+
+        this._syncEnabled();
     }
 };
 

diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js
index 989f088d73ffc92846a2a8d42659b07970e97466..c516934c96ebcef46a2ed43a4f00b598da4c1695 100644 (file)
--- a/js/ui/workspaceThumbnail.js
+++ b/js/ui/workspaceThumbnail.js
@@ -8,7 +8,6 @@ const Signals = imports.signals;
 const Background = imports.ui.background;
 const DND = imports.ui.dnd;
 const Main = imports.ui.main;
-const Tweener = imports.ui.tweener;
 const Workspace = imports.ui.workspace;
 const WorkspacesView = imports.ui.workspacesView;
 
@@ -1072,15 +1071,6 @@ var ThumbnailsBox = GObject.registerClass({
         }
     }
 
-    _tweenScale() {
-        Tweener.addTween(this,
-                         { scale: this._targetScale,
-                           time: RESCALE_ANIMATION_TIME / 1000,
-                           transition: 'easeOutQuad',
-                           onComplete: this._queueUpdateStates,
-                           onCompleteScope: this });
-    }
-
     _updateStates() {
         this._stateUpdateQueued = false;
 
@@ -1092,15 +1082,14 @@ var ThumbnailsBox = GObject.registerClass({
         this._iterateStateThumbnails(ThumbnailState.REMOVING, thumbnail => {
             this._setThumbnailState(thumbnail, ThumbnailState.ANIMATING_OUT);
 
-            Tweener.addTween(thumbnail,
-                             { slide_position: 1,
-                               time: SLIDE_ANIMATION_TIME / 1000,
-                               transition: 'linear',
-                               onComplete: () => {
-                                   this._setThumbnailState(thumbnail, ThumbnailState.ANIMATED_OUT);
-                                   this._queueUpdateStates();
-                               }
-                             });
+            thumbnail.ease_property('slide-position', 1, {
+                duration: SLIDE_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.LINEAR,
+                onComplete: () => {
+                    this._setThumbnailState(thumbnail, ThumbnailState.ANIMATED_OUT);
+                    this._queueUpdateStates();
+                }
+            });
         });
 
         // As long as things are sliding out, don't proceed
@@ -1110,25 +1099,28 @@ var ThumbnailsBox = GObject.registerClass({
         // Once that's complete, we can start scaling to the new size and collapse any removed thumbnails
         this._iterateStateThumbnails(ThumbnailState.ANIMATED_OUT, thumbnail => {
             this._setThumbnailState(thumbnail, ThumbnailState.COLLAPSING);
-            Tweener.addTween(thumbnail,
-                             { collapse_fraction: 1,
-                               time: RESCALE_ANIMATION_TIME / 1000,
-                               transition: 'easeOutQuad',
-                               onComplete: () => {
-                                   this._stateCounts[thumbnail.state]--;
-                                   thumbnail.state = ThumbnailState.DESTROYED;
-
-                                   let index = this._thumbnails.indexOf(thumbnail);
-                                   this._thumbnails.splice(index, 1);
-                                   thumbnail.destroy();
-
-                                   this._queueUpdateStates();
-                               }
-                             });
+            thumbnail.ease_property('collapse-fraction', 1, {
+                duration: RESCALE_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                onComplete: () => {
+                    this._stateCounts[thumbnail.state]--;
+                    thumbnail.state = ThumbnailState.DESTROYED;
+
+                    let index = this._thumbnails.indexOf(thumbnail);
+                    this._thumbnails.splice(index, 1);
+                    thumbnail.destroy();
+
+                    this._queueUpdateStates();
+                }
+            });
         });
 
         if (this._pendingScaleUpdate) {
-            this._tweenScale();
+            this.ease_property('scale', this._targetScale, {
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                duration: RESCALE_ANIMATION_TIME,
+                onComplete: () => this._queueUpdateStates()
+            });
             this._pendingScaleUpdate = false;
         }
 
@@ -1139,14 +1131,13 @@ var ThumbnailsBox = GObject.registerClass({
         // And then slide in any new thumbnails
         this._iterateStateThumbnails(ThumbnailState.NEW, thumbnail => {
             this._setThumbnailState(thumbnail, ThumbnailState.ANIMATING_IN);
-            Tweener.addTween(thumbnail,
-                             { slide_position: 0,
-                               time: SLIDE_ANIMATION_TIME / 1000,
-                               transition: 'easeOutQuad',
-                               onComplete: () => {
-                                   this._setThumbnailState(thumbnail, ThumbnailState.NORMAL);
-                               }
-                             });
+            thumbnail.ease_property('slide-position', 0, {
+                duration: SLIDE_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                onComplete: () => {
+                    this._setThumbnailState(thumbnail, ThumbnailState.NORMAL);
+                }
+            });
         });
     }
 
@@ -1363,14 +1354,13 @@ var ThumbnailsBox = GObject.registerClass({
         let indicatorThemeNode = this._indicator.get_theme_node();
         let indicatorTopFullBorder = indicatorThemeNode.get_padding(St.Side.TOP) + indicatorThemeNode.get_border_width(St.Side.TOP);
         this.indicator_y = this._indicator.allocation.y1 + indicatorTopFullBorder;
-        Tweener.addTween(this,
-                         { indicator_y: thumbnail.allocation.y1,
-                           time: WorkspacesView.WORKSPACE_SWITCH_TIME / 1000,
-                           transition: 'easeOutQuad',
-                           onComplete: () => {
-                               this._animatingIndicator = false;
-                               this._queueUpdateStates();
-                           }
-                         });
+        this.ease_property('indicator-y', thumbnail.allocation.y1, {
+            progress_mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            duration: WorkspacesView.WORKSPACE_SWITCH_TIME,
+            onComplete: () => {
+                this._animatingIndicator = false;
+                this._queueUpdateStates();
+            }
+        });
     }
 });